<template>
  <div class="app-container bg">
    <el-form
      class="box-container"
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item style="width: 160px" prop="registerDeptId">
        <el-select
          v-model="queryParams.registerDeptId"
          placeholder="请选择进修科目"
          filterable
          clearable
          @change="handleQuery"
        >
          <el-option
            v-for="(item, index) in registerDeptList"
            :key="index"
            :label="item.registerDeptName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item style="width: 160px" prop="registerTypeId" v-if="false">
        <el-select
          v-model="queryParams.registerTypeId"
          placeholder="请选择招生类型"
          filterable
          clearable
          @change="handleQuery"
        >
          <el-option
            v-for="(item, index) in registerTypeList"
            :key="index"
            :label="item.registerTypeName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item style="width: 160px" prop="batchName">
        <el-select
          v-model="queryParams.batchName"
          placeholder="请选择招生批次"
          filterable
          clearable
          @change="handleQuery"
        >
          <el-option
            v-for="(item, index) in registerBatchList"
            :key="index"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item style="width: 160px" prop="registerYear">
        <el-date-picker
          v-model="queryParams.registerYear"
          type="year"
          style="width: 160px"
          placeholder="请选择招生年份"
          format="yyyy"
          value-format="yyyy"
          @change="handleQuery"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item style="width: 160px" prop="userName">
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >刷新</el-button
        >
      </el-form-item>
    </el-form>
    <div class="box-container">
      <div class="custom-table">
        <div
          class="custom-register"
          v-for="(row, index) in dataList"
          :key="index"
        >
          <div class="info-row">
            <div class="col border" style="display: flex">
              <div style="margin-left: 15px; text-align: left; width: 100%">
                <div class="user-name">
                  <span
                    style="font-size: 18px; font-weight: bolder; color: #a52529"
                    >{{ row.userName }}</span
                  >
                  <el-tag
                    type="warning"
                    v-if="row.graduationStatus == 3"
                    size="small"
                    style="margin-left: 10px"
                    >终止进修</el-tag
                  >
                </div>
                <div class="info">
                  <div class="flexInfo">
                    <div>进修科目：{{ row.registerDeptName }}</div>
                    <div>
                      进修期限：{{ row.durationStartDate }} -
                      {{ row.durationEndDate }}
                    </div>
                    <!-- <div>申请时间：{{ parseTime(row.applyTime) }}</div> -->
                    <div>
                      招生批次：{{
                        row.batchName || getDuration(row.durationStartDate)
                      }}
                    </div>
                    <div>申请单位：{{ row.unitHospitalName }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col border">
              <div class="desc">审批状态</div>
              <div class="systemColor">
                {{ row.auditStatusName }}
              </div>
            </div>
            <div class="col border" style="position: relative">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-c-scale-to-original"
                @click="detailOpen(row)"
                >查看
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-c-scale-to-original"
                v-if="row.auditStatusName == '审批通过'"
                @click="handleNoticePreview(row)"
                >查看通知书
              </el-button>
              <!--            <el-button size="mini" type="text" icon="el-icon-c-scale-to-original" v-if="row.noticeStatus == 3"-->
              <!--                       @click="downloadWord">下载通知书-->
              <!--            </el-button>-->
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="editOpen(row)"
                v-if="row.auditStatus == 0 || row.auditStatus == 5"
                >编辑
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(row)"
                v-if="row.auditStatus == 0 || row.auditStatus == 5"
                >删除</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-document-copy"
                @click="revokeOpen(row)"
                v-if="
                  row.auditStatus != 0 &&
                  row.auditStatus != 2 &&
                  row.auditStatus != 3 &&
                  row.noticeStatus != 2
                "
                >撤销
              </el-button>
            </div>
          </div>
          <!-- 流程图部分 -->
          <div class="process-flow-row">
            <span
              v-if="row.registerFlowList"
              style="margin-left: 10px; color: #3d3d3d"
              >报到前准备进度：{{ row.progress }}</span
            >
            <ProcessFlow
              :process-data="row.registerFlowList"
              @node-click="handleNodeClick($event, row)"
            />
          </div>
        </div>
      </div>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <CustomModal :visible.sync="noticePreviewShow" title="录取通知书预览">
      <div style="background-color: white; padding: 20px 30px">
        <div ref="enterDom">
          <registerBookPreview
            :form-obj="noticeContent"
            v-if="noticePreviewShow"
          ></registerBookPreview>
        </div>
      </div>

      <template #footer>
        <div class="footer">
          <div
            style="text-align: center; margin-bottom: 10px"
            v-if="noticeContent.noticeStatus != 4"
          >
            提示：进修院区具体安排由科室进行，如需了解可通过总机52889999转至各具体科室询问。
          </div>
          <div
            style="text-align: center; margin-bottom: 10px"
            v-if="noticeContent.noticeStatus == 4"
          >
            您已错过确认时间，请参加下一次报名。
          </div>
          <div class="tips" v-if="noticeContent.noticeStatus != 4">
            请在阅读完录取通知书后<span class="underline"
              >确认是否可以按时来我院报到？</span
            >
          </div>
          <div style="text-align: center">
            <el-button
              type="primary"
              @click="downloadWord"
              v-if="noticeContent.noticeStatus == 3"
              size="medium"
              >下载通知书</el-button
            >
            <el-button
              type="success"
              v-if="noticeContent.noticeStatus == 2"
              @click="updateStatus(5)"
              size="medium"
              >我取消本次进修</el-button
            >
            <el-button
              type="primary"
              v-if="noticeContent.noticeStatus == 2"
              @click="updateStatus(3)"
              size="medium"
              >我可以按时来院报到</el-button
            >
            <el-button
              v-if="noticeContent.noticeStatus == 4"
              type="primary"
              @click="noticePreviewShow = false"
              size="medium"
              >我知道了</el-button
            >
            <el-button
              type="info"
              plain
              v-if="noticeContent.noticeStatus != 4"
              @click="noticePreviewShow = false"
              size="medium"
              >关闭页面</el-button
            >
          </div>
        </div>
      </template>
    </CustomModal>
    <CustomModal
      :visible.sync="signShow"
      :down="true"
      :downUrl="`${pdfUrl}`"
      :title="signTitle"
      @close="close('close')"
    >
      <div style="height: 100%">
        <embed
          :src="`${pdfUrl}`"
          type="application/pdf"
          width="100%"
          height="100%"
        />
      </div>
      <template #footer v-if="codeImg || studentSignImg">
        <div class="footer">
          <div
            style="
              text-align: center;
              display: flex;
              flex-direction: column;
              align-items: center;
            "
            v-if="codeImg"
          >
            <span>
              阅读全文并使用<span style="color: red">微信</span>扫码签字：</span
            >
            <span>(扫码签字后，将默认为上文两处需要签名的地方签好字)</span>
            <img :src="codeImg" class="codeimg" alt="" />
            <span>扫一扫</span>
            <!-- <el-button type="info" plain @click="signShow = false" size="medium">关闭页面</el-button> -->
          </div>
          <div
            v-if="studentSignImg"
            style="
              text-align: center;
              display: flex;
              flex-direction: column;
              align-items: center;
            "
          >
            <span>已签名</span>
            <img :src="studentSignImg" class="codeimg" alt="" />
          </div>
        </div>
      </template>
    </CustomModal>
    <el-dialog
      title="报名详情"
      :visible.sync="detailShow"
      width="1040px"
      append-to-body
      :close-on-click-modal="false"
    >
      <registerInfoDetail v-if="detailShow" :register-id="registerInfo.id" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailShow = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 报到说明弹框 -->
    <el-dialog
      title="报到说明"
      :visible.sync="reportDialogVisible"
      width="300px"
      append-to-body
      center
      :close-on-click-modal="false"
    >
      <div style="text-align: center; margin-top: 20px">
        {{
          reportNodeStatus == 0
            ? content
            : "您已成功报到，请在【我的进修】界面中，查看进修进度。"
        }}
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button
          v-if="reportNodeStatus != 0"
          @click="reportDialogVisible = false"
          style="color: #ffffff; background-color: #aeb0b2"
          >取消</el-button
        >
        <el-button
          v-else
          @click="
            reportDialogVisible = false;
            noticePreview(registerInfoId);
          "
          style="color: #ffffff; background-color: #aeb0b2"
          >查看通知书</el-button
        >

        <el-button
          type="primary"
          @click="reportDialogVisible = false"
          v-if="reportNodeStatus == 0"
          style="background-color: #1e98d7; border-color: #1e98d7"
          >我知道了</el-button
        >
        <el-button
          type="primary"
          v-else
          @click="study()"
          style="background-color: #1e98d7; border-color: #1e98d7"
          >去查看</el-button
        >
      </div>
    </el-dialog>
    <!-- 支付弹框 -->
    <el-dialog
      title="支付进修费用"
      :visible.sync="payDialogVisible"
      width="600px"
      append-to-body
      :close-on-click-modal="false"
      @close="closePayDialog"
    >
      <div class="pay-info-container" v-if="payInfo != null">
        <!-- 待支付 -->
        <div
          v-if="payInfo.paymentStatus === 0"
          style="text-align: center; padding: 10px 0 20px"
        >
          <p style="color: #666; margin-bottom: 10px">待支付</p>
          <img
            src="./pay.jpg"
            alt="小程序收款码"
            style="width: 120px; height: 120px; margin-bottom: 10px"
          />
          <div
            style="
              font-size: 28px;
              font-weight: bold;
              color: #a52529;
              margin-bottom: 10px;
            "
          >
            {{ payInfo.paymentAmount }} 元
          </div>
          <p style="color: #999; font-size: 14px">微信扫二维码支付</p>
        </div>
        <!-- 其他支付状态 -->
        <div v-else class="payment-status-section">
          <div class="payment-status-stamp-container">
            <div
              class="payment-status-stamp"
              :class="getPaymentStatusInfo(payInfo).className"
            >
              {{ getPaymentStatusInfo(payInfo).text }}
            </div>
          </div>
          <span v-if="payInfo.refundStatus === 1 || payInfo.refundStatus === 0">
            退款申请已提交，进修老师会尽快处理，请您耐心等待。
          </span>

          <div
            style="
              font-size: 28px;
              font-weight: bold;
              color: #a52529;
              margin-bottom: 10px;
            "
          >
            {{ payInfo.paymentAmount }} 元
          </div>
          <p style="color: #999; font-size: 14px" v-if="payInfo.paymentTime">
            支付时间：{{ parseTime(payInfo.paymentTime, "{y}-{m}-{d}") }}
          </p>

          <div v-if="payInfo.paymentStatus !== 0">
            缴费方式：{{ payInfo.payDataType === 1 ? "线上" : "线下" }}
          </div>
        </div>
        <div class="section">
          <div class="section-title">基本信息</div>
          <div class="info-grid">
            <div class="info-item">
              <span class="label">姓名：</span
              ><span>{{ payInfo.userName }}</span>
            </div>
            <div class="info-item" v-if="payInfo.registerInfo">
              <span class="label">进修科室：</span
              ><span>{{ payInfo.registerInfo.registerDeptName }}</span>
            </div>
            <div class="info-item" v-if="payInfo.registerNoticeVo">
              <span class="label">工号：</span
              ><span>{{ payInfo.registerNoticeVo.jobNumber }}</span>
            </div>
            <div class="info-item" v-if="payInfo.registerInfo">
              <span class="label">进修期限：</span
              ><span
                >{{ payInfo.registerInfo.durationStartDate }} -
                {{ payInfo.registerInfo.durationEndDate }}</span
              >
            </div>
            <div class="info-item">
              <span class="label">手机号：</span
              ><span>{{ payInfo.phoneNumber }}</span>
            </div>
            <div class="info-item">
              <span class="label">身份证号：</span
              ><span>{{ payInfo.idCard }}</span>
            </div>
            <div class="info-item">
              <span class="label">邮箱：</span
              ><span>{{ payInfo.registerInfo.email }}</span>
            </div>
            <div class="info-item" v-if="payInfo.registerInfo">
              <span class="label">派出单位：</span
              ><span>{{ payInfo.registerInfo.unitHospitalName }}</span>
            </div>
          </div>
        </div>
        <div class="section" v-if="payInfo.registerNotice">
          <div class="section-title">缴费信息</div>
          <div class="fee-grid">
            <div class="fee-item" v-if="payInfo.id">
              订单号：{{ payInfo.id }}
            </div>
            <div class="fee-item">进修费用：{{ payInfo.engageAmount }} 元</div>
            <div class="fee-item">
              实验费用：{{ payInfo.materialAmount }} 元
            </div>
            <div class="fee-item" v-if="payInfo.joinMicrosutureAmount > 0">
              显微血管缝合操作培训费用：{{ payInfo.joinMicrosutureAmount }} 元
            </div>
            <div class="fee-item total-fee">
              进修费合计：{{ payInfo.paymentAmount }} 元
            </div>
          </div>
        </div>
      </div>
      <div
        slot="footer"
        class="dialog-footer"
        v-if="payInfo != null"
        style="text-align: center"
      >
        <div v-if="payInfo.paymentStatus === 0">
          <el-button @click="payDialogVisible = false">关闭</el-button>
          <!-- <el-button type="primary" @click="payDialogVisible = false"
            >去支付</el-button
          > -->
        </div>
        <div
          v-else-if="
            payInfo.paymentStatus === 1 &&
            payInfo.refundStatus != 0 &&
            payInfo.refundStatus != 1
          "
        >
          <el-button
            @click="handleInvoice"
            v-if="payInfo.payDataType === 1"
            style="
              background-color: #a52529;
              color: white;
              border-color: #a52529;
            "
            >我要开票</el-button
          >
          <el-button
            @click="handleRefund"
            v-if="
              payInfo.payDataType === 1 &&
              !isRefundExpired &&
              payInfo.registerInfo.cultureStatus !== 3
            "
            :style="
              payInfo.refundStatus === 3
                ? 'background-color: #9b9b9b; color: #fff; border-color: #9b9b9b;'
                : 'background-color: #a52529; color: white; border-color: #a52529;'
            "
            >我要退款</el-button
          >
        </div>
      </div>
    </el-dialog>
    <!-- 支付说明弹框 -->
    <el-dialog
      title="支付说明"
      :visible.sync="paymentInstructionDialogVisible"
      width="365px"
      append-to-body
      center
      :close-on-click-modal="false"
    >
      <div
        style="
          text-align: center;
          margin-top: 20px;
          display: flex;
          align-items: center;
          text-indent: 2em;
        "
      >
        在线支付暂未开通，请根据【进修录取通知书】中，【线上缴费操作流程】中的提示进行缴费。
      </div>
      <div style="color: #9b9a9a; text-align: center; margin-top: 10px">
        (已完成线下缴费的情况下，请忽略本缴费提醒)
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button
          @click="paymentInstructionDialogVisible = false"
          style="color: #ffffff; background-color: #aeb0b2"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click="
            paymentInstructionDialogVisible = false;
            noticePreview(registerInfoId);
          "
          style="background-color: #1e98d7; border-color: #1e98d7"
          >进修录取通知书</el-button
        >
      </div>
    </el-dialog>
    <!-- 支付方式选择弹窗 -->
    <el-dialog
      title="支付进修费"
      :visible.sync="paymentMethodDialogVisible"
      width="500px"
      append-to-body
      center
      :close-on-click-modal="false"
    >
      <div style="text-align: center">
        <p>请选择支付方式：</p>
        <div
          style="
            margin-top: 20px;
            display: flex;
            justify-content: center;
            gap: 40px;
          "
        >
          <div style="text-align: center">
            <el-button
              @click="handleOnlinePay"
              style="
                background-color: #a52529;
                color: white;
                border-color: #a52529;
              "
              >线上支付</el-button
            >
            <div style="margin-top: 8px; font-size: 18px; color: #606266">
              微信扫码支付
            </div>
          </div>
          <div style="text-align: center">
            <el-button
              @click="handleOfflinePay"
              style="
                background-color: #a52529;
                color: white;
                border-color: #a52529;
              "
              >线下支付</el-button
            >
            <div style="margin-top: 8px; font-size: 18px; color: #606266">
              公务卡支付
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 线下支付提示弹窗 -->
    <el-dialog
      title="线下支付"
      :visible.sync="offlinePayDialogVisible"
      width="400px"
      append-to-body
      center
      :close-on-click-modal="false"
    >
      <div style="text-align: center">
        <p>选择线下支付的学员，请于报到当天至门诊10楼财务处刷公务卡缴费。</p>
        <p style="color: red">
          (若已完成支付，最晚在报到当日，系统将显示“已支付”状态)
        </p>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" @click="offlinePayDialogVisible = false"
          >我知道了</el-button
        >
      </div>
    </el-dialog>
    <!-- 我要开票弹窗 -->
    <el-dialog
      title="我要开票"
      :visible.sync="invoiceDialogVisible"
      width="400px"
      append-to-body
      center
      :close-on-click-modal="false"
    >
      <div style="text-align: center">
        <img
          src="./pay.jpg"
          alt="开票二维码"
          style="width: 200px; height: 200px"
        />
        <p>微信扫二维码开票</p>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" @click="invoiceDialogVisible = false"
          >我知道了</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { createPreOrder, getInfoByRegisterId, refundOrder } from "@/api/business/order";
import { listAllRegisterDept } from "@/api/business/registerDept";
import {
  delRegisterInfo,
  getAuditList,
  getRegisterInfo,
  getSignBook,
  getUserWriteSign,
  indexListRegisterInfo,
  updateRegisterInfo,
} from "@/api/business/registerInfo";
import { batchListAll } from "@/api/business/registerNeed";
import { listAllRegisterType } from "@/api/business/registerType";
import CustomModal from "@/components/CustomModal/CustomModal.vue";
import { setupBatchData } from "@/utils/batchUtils";
import ProcessFlow from "@/views/business/registerBase/audit/components/ProcessFlow.vue";
import registerBookPreview from "@/views/business/registerBase/audit/components/registerBookPreview.vue";
import registerInfoDetail from "@/views/business/registerBase/audit/components/registerInfoDetail.vue";
import domtoimage from "dom-to-image";
let timer = null;

export default {
  components: {
    registerInfoDetail,
    registerBookPreview,
    ProcessFlow,
    CustomModal,
  },
  data() {
    return {
      baseURL: process.env.VUE_APP_BASE_API,
      loading: true,
      noticeContent: {},
      content: "",
      noticePreviewShow: false,
      ids: [],
      single: true,
      multiple: true,
      showSearch: true,
      total: 0,
      dataList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        registerDeptId: null,
        registerTypeId: null,
        batchName: null,
        registerYear: null,
        userName: null,
        // 移除 graduationStatusList 过滤条件，让暂存数据也能显示
        // graduationStatusList: [0, 1, 2, 4],
      },
      registerDeptList: [],
      registerTypeList: [],
      registerBatchList: [],
      batchDateList: [],
      registerBaseVo: {},
      detailShow: false,
      registerInfo: {
        id: null,
      },
      signShow: false,
      pdfUrl: "",
      codeImg: "",
      studentSignImg: "",
      signTitle: "",
      dialogVisible: false, // 这个变量似乎不再需要，但暂时保留以防万一
      reportDialogVisible: false, // 新增：控制报到说明弹框的显示
      reportNodeStatus: 0,
      registerInfoId: null, // 新增：存储注册信息ID
      payDialogVisible: false, // 新增：控制支付弹框的显示
      payInfo: null,
      payInfoTimer: null,
      paymentMethodDialogVisible: false, // 控制支付方式选择弹窗
      offlinePayDialogVisible: false, // 控制线下支付提示弹窗
      invoiceDialogVisible: false, // 控制开票弹窗
      paymentInstructionDialogVisible: false, // 控制支付说明弹窗
    };
  },
  computed: {
    // 判断是否超过退款期限（两周）
    isRefundExpired() {
      if (!this.payInfo || !this.payInfo.createTime) {
        return false;
      }
      const startDate = new Date(this.payInfo.createTime);
      const twoWeeksLater = new Date(
        startDate.getTime() + 14 * 24 * 60 * 60 * 1000
      );
      const currentDate = new Date();
      return currentDate >= twoWeeksLater;
    },
  },
  async created() {
    await this.getbatch();
    this.getList();
    this.listAllRegisterDept();
    this.listAllRegisterType();
  },
  methods: {
    // 获取批次数据
    async getbatch() {
      await setupBatchData(this);
    },
    // 验证进修期限
    async validateDurationStartDate(row) {
      if (
        !row.durationStartDate ||
        row.createBy == "admin" ||
        row.createBy == "system"
      ) {
        return true; // 如果没有进修期限，允许继续
      }

      try {
        // 解析进修期限开始时间，确保是当月1号
        const durationStartStr = row.durationStartDate;
        let durationStartDate;

        // 兼容不同的日期格式
        if (durationStartStr.includes("/")) {
          const parts = durationStartStr.split("/");
          // 确保是当月1号，兼容苹果浏览器
          durationStartDate = new Date(parts[0], parts[1] - 1, 1);
        } else if (durationStartStr.includes("-")) {
          const parts = durationStartStr.split("-");
          // 确保是当月1号，兼容苹果浏览器
          durationStartDate = new Date(parts[0], parts[1] - 1, 1);
        } else {
          console.warn("无法解析进修期限格式:", durationStartStr);
          return true; // 格式无法解析时允许继续
        }

        const currentDate = new Date();

        // 检查是否过期
        if (durationStartDate < currentDate) {
          // 显示过期提示
          this.$modal.msgWarning(
            `${row.userName}的进修期限已过期，请删除后重新提交进修申请。`
          );
          return false; // 验证失败
        }

        // 如果没有过期，检查当前科室的批次是否在时间范围内
        const batchValid = await this.validateBatchTimeRange(
          row,
          durationStartDate
        );
        return batchValid;
      } catch (error) {
        console.error("验证进修期限时出错:", error);
        return false; // 出错时不允许继续
      }
    },
    // 验证批次时间范围
    async validateBatchTimeRange(row, durationStartDate) {
      try {
        const response = await batchListAll();
        const batchList = response.data || [];

        // 获取当前科室对应的批次信息
        const currentBatch = batchList.find((batch) => {
          // 根据进修期限的月份匹配批次
          const month = durationStartDate.getMonth() + 1;
          const batchMonth = this.getBatchMonth(batch.batchName);
          return batchMonth === month;
        });

        if (currentBatch) {
          // 检查当前时间是否在批次的开始和结束时间范围内
          const currentDate = new Date();
          let startDate, endDate;

          // 解析批次开始时间和结束时间
          startDate = this.parseDate(currentBatch.startDate);
          endDate = this.parseDate(currentBatch.endDate);

          if (startDate && endDate) {
            if (currentDate < startDate || currentDate > endDate) {
              this.$modal.msgWarning(
                `${row.userName}的进修批次时间范围不在当前招生时间内。`
              );
              return false; // 验证失败
            }
          }
        }

        return true; // 验证通过
      } catch (error) {
        console.error("验证批次时间范围时出错:", error);
        return false; // 出错时验证失败
      }
    },
    // 从批次名称中提取月份
    getBatchMonth(batchName) {
      if (!batchName) return null;

      const monthMap = {
        "3月": 3,
        "6月": 6,
        "9月": 9,
        "12月": 12,
        March: 3,
        June: 6,
        September: 9,
        December: 12,
      };

      return monthMap[batchName] || parseInt(batchName);
    },
    // 统一的日期解析方法，兼容多种日期格式
    parseDate(dateString) {
      if (!dateString) return null;

      try {
        // 处理斜杠格式，兼容Safari浏览器
        if (dateString.includes("/")) {
          return new Date(dateString.replace(/\//g, "-"));
        }

        // 处理其他格式
        const date = new Date(dateString);

        // 检查日期是否有效
        if (isNaN(date.getTime())) {
          console.warn(`无效的日期格式: ${dateString}`);
          return null;
        }

        return date;
      } catch (error) {
        console.error(`日期解析错误: ${dateString}`, error);
        return null;
      }
    },
    getPaymentStatusInfo(row) {
      // 优先判断退款状态
      if (row.refundStatus != null) {
        switch (row.refundStatus) {
          case 0:
            if (row.registerApprovalFlow.approverRole === "admin") {
              return { text: "退款待管理员审核", className: "refunding" };
            } else if (
              row.registerApprovalFlow.approverRole &&
              ["manage", "secretary"].some((role) =>
                row.registerApprovalFlow.approverRole.split(",").includes(role)
              )
            ) {
              return { text: "退款待科室审核", className: "refunding" };
            } else {
              return { text: "退款待审核", className: "refunding" };
            }
          case 1:
            if (row.registerApprovalFlow.approverRole === "admin") {
              return { text: "退款待管理员审核", className: "refunding" };
            } else {
              return { text: "退款审核中", className: "refunding" };
            }

          case 2:
            return { text: "退款已审核", className: "refunding" };
          case 3:
            return { text: "退款已拒绝", className: "refunding" };
          case 4:
            return { text: "退款执行中", className: "refunding" };
          case 5:
            return { text: "已退款", className: "refunded" };
          case 6:
            return { text: "已失败", className: "failed" };
          default:
            return { text: "未知状态", className: "unknown" };
        }
      } else {
        switch (row.paymentStatus) {
          case 0:
            return { text: "待支付", className: "unknown" };
          case 1:
            return { text: "已支付", className: "paid" };
          case 2:
            return { text: "支付失败", className: "failed" };
          case 3:
            return { text: "已逾期", className: "closed" };
          case 4:
            return { text: "退款中", className: "refunding" };
          case 5:
            return { text: "已退款", className: "refunded" };
          default:
            return { text: "未知状态", className: "unknown" };
        }
      }
    },
    handleInvoice() {
      this.invoiceDialogVisible = true;
    },
    handleRefund() {
      if (this.payInfo.refundStatus === 3) {
        this.$modal.msgError("当前进修单的退款申请已被拒绝，无法再次申请");
        return;
      }

      const startDateStr = this.payInfo.createTime;
      if (!startDateStr) {
        this.$modal.msgError("无法获取创建日期，不能申请退款。");
        return;
      }
      const startDate = new Date(startDateStr);
      const twoWeeksLater = new Date(
        startDate.getTime() + 14 * 24 * 60 * 60 * 1000
      );
      const currentDate = new Date();
      if (currentDate >= twoWeeksLater) {
        const y = twoWeeksLater.getFullYear();
        const m = (twoWeeksLater.getMonth() + 1).toString().padStart(2, "0");
        const d = twoWeeksLater.getDate().toString().padStart(2, "0");
        const formattedDate = `${y}/${m}/${d}`;
        this.$modal.alert(
          `当前申请单无法办理退款，进修退款仅可在进修"确认报到"后两周内（${formattedDate}及以内）提交申请，逾期将不予受理。`,
          "提示",
          {
            confirmButtonText: "我知道了",
            callback: (action) => {},
          }
        );
      } else {
        this.$modal
          .confirm("您确定要申请退款吗？")
          .then(() => {
            refundOrder({
              orderId: this.payInfo.id,
              refundAmount: this.payInfo.paymentAmount,
              refundReason: "退款",
            })
              .then(() => {
                this.$modal.msgSuccess("退款申请已提交");
                this.showPay(this.registerInfoId);
                this.getList();
              })
              .catch((error) => {
                console.error("退款申请失败:", error);
              });
          })
          .catch((error) => {
            console.error("操作失败:", error);
            this.$modal.msgError("操作失败，请稍后重试");
          });
      }
    },
    // openDialog() { // 这个方法似乎不再需要，可以注释或删除
    //   this.dialogVisible = true;
    // },
    openTip() {
      this.$alert(
        "欢迎您来华山医院进修，根据教育处进修生管理规定，所有进修学员在线下报到前，需要完成岗前培训相关课程学习，请登录进修管理系统，在个人中心-岗前培训专栏处进行线上学习",
        "温馨提示",
        {
          confirmButtonText: "确定",
          callback: (action) => {},
        }
      );
    },
    handleOnlinePay() {
      this.paymentMethodDialogVisible = false;
      this.showPay(this.registerInfoId);
    },
    handleOfflinePay() {
      this.paymentMethodDialogVisible = false;
      getInfoByRegisterId(this.registerInfoId).then((response) => {
        if (response.data && response.data.paymentStatus !== 0) {
          this.showPay(this.registerInfoId);
        } else {
          this.offlinePayDialogVisible = true;
        }
      });
    },
    downloadWord() {
      domtoimage.toPng(this.$refs.enterDom).then((dataUrl) => {
        let a = document.createElement("a");
        let event = new MouseEvent("click");
        a.download = "进修录取通知书.jpg";
        a.href = dataUrl;
        a.dispatchEvent(event);
      });
    },
    updateStatus(value) {
      let message = "";
      let data = {
        id: this.noticeContent.id,
        phoneNumber: this.noticeContent.phoneNumber,
        noticeStatus: value,
        sureStatus: null,
        sureFlag: null,
      };
      if (value == 3) {
        message = "您确定按时报到吗？";
        data.sureStatus = 1;
        data.sureFlag = 1;
      } else if (value == 5) {
        message = "您确定不能如期前来吗？";
      }
      this.$modal.confirm(message).then(() => {
        if (value == 3) {
          createPreOrder({
            registerId: this.registerInfoId,
          })
            .then(() => {
              updateRegisterInfo(data).then(() => {
                // this.$modal.msgSuccess("保存成功");
                this.$alert(
                  "欢迎您来华山医院进修，根据教育处进修生管理规定，所有进修学员在线下报到前，需要完成岗前培训相关课程学习，请登录进修管理系统，在个人中心-岗前培训专栏处进行线上学习",
                  "温馨提示",
                  {
                    confirmButtonText: "确定",
                    callback: (action) => {
                      this.getList();

                      this.noticePreviewShow = false;
                    },
                  }
                );
              });
            })
            .catch((err) => {
              console.log(err);
              this.$modal.msgError(
                "进修订单生成出现异常，报到确认失败，请重新提交。"
              );
              this.noticePreviewShow = false;
            });
        } else {
          updateRegisterInfo(data).then(() => {
            this.$modal.msgSuccess("保存成功");
            this.noticePreviewShow = false;
            this.getList();
          });
        }
      });
    },
    study() {
      this.$router.push({
        path: "/study",
      });
    },
    viewVideo() {
      this.$router.push({
        path: "/business/resourceInfo/indexList",
      });
    },
    async handleNodeClick(event, row) {
      if (!event.canClick) {
        return;
      }
      switch (event.nodeName) {
        case "进修申请状态":
          if (event.nodeStatus == 0) {
            // 验证进修期限
            const isValid = await this.validateDurationStartDate(row);
            if (!isValid) {
              return; // 如果验证失败，不允许编辑
            }
            this.editOpen(row);
          } else {
            this.detailOpen(row);
          }

          break;
        case "进修医院资质审核":
          if (event.nodeStatus == 1 || event.nodeStatus == 2) {
            this.$alert("进修医院正在进行资质审核，请耐心等待", "提示", {
              confirmButtonText: "确定",
              type: "warning",
              callback: (action) => {},
            });
          }
          if (event.nodeStatus == 3) {
            this.$alert("进修医院已通过了您的资质审核。", "提示", {
              confirmButtonText: "确定",
              type: "success",
              callback: (action) => {},
            });
          }
          if (event.nodeStatus == 4) {
            getAuditList(row.id).then((response) => {
              this.$alert(
                `您的进修申请已被进修医院拒绝，原因是：${response.data[0].remark}。若您仍想继续申请，请点击右上角的 “进入报名端”，找到相应科室重新报名。`,
                "提示",
                {
                  confirmButtonText: "确定",
                  type: "warning",
                  callback: (action) => {},
                }
              );
            });
          }
          if (event.nodeStatus == 5) {
            getAuditList(row.id).then((response) => {
              this.$alert(
                `进修医院退回了您的进修申请，原因是：${response.data[0].remark}，请修改后重新提交`,
                "提示",
                {
                  confirmButtonText: "修改",
                  type: "warning",
                  callback: async (action) => {
                    if (action == "confirm") {
                      // 验证进修期限
                      const isValid = await this.validateDurationStartDate(row);
                      if (isValid) {
                        this.editOpen(row);
                      }
                    }
                  },
                }
              );
            });
          }

          break;
        case "进修医院发放通知书":
          if (event.nodeStatus == 1) {
            this.$alert(
              "进修医院资质审核通过后，会给您发放通知书，请耐心等待",
              "提示",
              {
                confirmButtonText: "确定",
                type: "warning",
                callback: (action) => {},
              }
            );
          } else {
            this.noticePreview(row.id);
          }
          break;
        case "确定按时报到":
          this.noticePreview(row.id);

          break;
        case "支付进修费用":
          this.registerInfoId = row.id;
          if (event.nodeStatus == null && event.refundStatus == null) {
            this.paymentInstructionDialogVisible = true;
          } else if (event.nodeStatus == 0 && event.refundStatus == null) {
            this.paymentMethodDialogVisible = true;
          } else if (event.nodeStatus == 3) {
            this.$confirm(
              "当前进修的支付状态已显示逾期，请及时联系导师处理。",
              "支付状态",
              {
                confirmButtonText: "我知道了",
                cancelButtonText: "取消",
                type: "warning",
                customClass: "payment-status-dialog",
                center: true,
              }
            )
              .then(() => {
                // 用户点击"我知道了"的处理逻辑
              })
              .catch(() => {
                // 用户点击"取消"的处理逻辑
              });
          } else {
            this.showPay(row.id);
          }
          break;
        case "完成岗前培训视频":
          if (event.nodeStatus == 1) {
            this.$alert("您已完成岗前培训", "提示", {
              confirmButtonText: "确定",
              type: "success",
              callback: (action) => {},
            });
          } else {
            this.$alert("确定跳转到岗位培训，去进行培训吗？", "提示", {
              confirmButtonText: "确定",
              type: "info",
              callback: (action) => {
                if (action == "confirm") {
                  this.viewVideo();
                }
              },
            });
          }
          break;
        case "签署进修生告知书":
          //       "webTargetUrl": "https://jx.edu-huashan.com:18084/engage-web",  #界面二维码扫描后打开地址，二维码中会拼接在url拼接上：?guid=签字的id【后面的签字接口可以通过这个id】
          // "registerId": "868",
          // "signBookKind": "1"  #告知表简写，1：进修生告知书，2：签署临床医务人员行风自律承诺书,3：科主任签署行风自律承诺书
          this.signShow = true;
          this.signTitle = "签署进修生告知书";
          this.registerInfoId = row.id; // 新增：存储注册信息ID
          this.studentSignImg = "";

          this.getSignBook(1);

          break;
        case "签署临床医务人员行风自律承诺书":
          this.signShow = true;
          this.signTitle = "签署临床医务人员行风自律承诺书";
          this.registerInfoId = row.id; // 新增：存储注册信息ID
          this.studentSignImg = "";
          this.getSignBook(2);
          break;
        case "科主任签署行风承诺书":
          if (event.nodeStatus == 0) {
            this.$alert("进修医院负责人将签字确认，请耐心等待", "提示", {
              confirmButtonText: "确定",
              type: "warning",
              callback: (action) => {},
            });
          } else {
            this.$alert("进修医院负责人已为您签署行风承诺书", "提示", {
              confirmButtonText: "确定",
              type: "success",
              callback: (action) => {},
            });
          }
          break;
        case "现场报到(扫二维码)":
          // this.openDialog(); // 旧的逻辑，注释掉

          this.registerInfoId = row.id; // 新增：存储注册信息ID
          getRegisterInfo(row.id).then((response) => {
            this.reportDialogVisible = true; // 新增：打开报到说明弹框
            this.reportNodeStatus = event.nodeStatus;
            if (response.data.registerNoticeVo) {
              this.content = `请于${response.data.registerNoticeVo.registerDate} ${response.data.registerNoticeVo.registerTime}来院报到。`;
            }
          });
          break;
        case "cancel":
          alert("已取消");
          break;
        default:
          break;
      }
    },
    showPay(id) {
      // 清除之前的轮询定时器，避免重复轮询
      if (this.payInfoTimer) {
        clearInterval(this.payInfoTimer);
        this.payInfoTimer = null;
      }

      const fetchPayInfo = () => {
        getInfoByRegisterId(id).then((response) => {
          if (response.data) {
            this.payInfo = response.data;
          } else {
            this.$modal.msgError("无数据");
            this.closePayDialog();
          }
        });
      };

      fetchPayInfo();
      this.payDialogVisible = true;

      this.payInfoTimer = setInterval(() => {
        fetchPayInfo();
      }, 5000);
    },
    closePayDialog() {
      this.payDialogVisible = false;
      this.getList(); // 重新获取列表数据
      if (this.payInfoTimer) {
        clearInterval(this.payInfoTimer);
        this.payInfoTimer = null;
      }
    },
    getSignBook(signBookKind) {
      getSignBook({
        registerId: this.registerInfoId,
        webTargetUrl: `${window.location.origin}/engage-web/sign`,
        signBookKind: signBookKind,
      }).then((response) => {
        this.codeImg = response.data.qrCodeImage;
        this.pdfUrl =
          this.baseURL + response.data.signFile + "?t=" + new Date().getTime();
        if (response.data.expireUuid && !this.studentSignImg) {
          // this.getUserWriteSign(response.data.expireUuid, signBookKind);
          this.createWs(response.data.expireUuid, signBookKind);
        }
        this.getList();
        this.studentSignImg = response.data.studentSignImg;
      });
    },
    createWs(expireUuid, signBookKind) {
      const protocol = this.baseURL.startsWith("https") ? "wss" : "ws";
      const ws = new WebSocket(
        protocol +
          this.baseURL.slice(this.baseURL.indexOf(":")) +
          "/websocket/sign/" +
          expireUuid
      );
      ws.onmessage = (event) => {
        if (event.data) {
          this.getSignBook(signBookKind);
          ws.close();
        }
      };
      ws.onclose = () => {
        // WebSocket连接已关闭
      };
    },
    // 根据expireUuid实时查询二维码是否有效（有效时间2分钟）
    getUserWriteSign(expireUuid, signBookKind) {
      const loopGetUserWriteSign = () => {
        getUserWriteSign(expireUuid)
          .then((response) => {
            if (response.data && response.code == 200) {
              if (this.signShow) {
                this.getSignBook(signBookKind);
              }
              clearInterval(timer);
            } else if (response.code == 500) {
              if (this.signShow) {
                this.getSignBook(signBookKind);
              }
              clearInterval(timer);
            }
          })
          .catch((error) => {
            clearInterval(timer);
          });
      };
      // timer = setInterval(loopGetUserWriteSign, 2000);
    },
    close() {
      clearInterval(timer);
    },
    getDuration(value) {
      // 当批次名称缺失时，根据进修开始日期提取月份并返回如 "3月" 的形式
      if (!value) return "";
      // 兼容 "YYYY/MM/DD" 与 "YYYY-MM-DD" 两种格式
      const parts = value.includes("/") ? value.split("/") : value.split("-");
      if (parts.length < 2) return "";
      const month = parseInt(parts[1], 10);
      if (isNaN(month)) return "";
      return month + "月";
    },
    handleNoticePreview(row) {
      // 从registerFlowList中找到"进修医院发放通知书"节点
      const noticeNode = Array.isArray(row.registerFlowList)
        ? row.registerFlowList.find(
            (item) => item.nodeName === "进修医院发放通知书"
          )
        : null;

      if (noticeNode && noticeNode.nodeStatus == 1) {
        this.$alert(
          "进修医院资质审核通过后，会给您发放通知书，请耐心等待",
          "提示",
          {
            confirmButtonText: "确定",
            type: "warning",
            callback: (action) => {},
          }
        );
      } else {
        this.noticePreview(row.id);
      }
    },
    noticePreview(id) {
      this.registerInfoId = id; // 新增：存储注册信息ID
      getRegisterInfo(id).then((response) => {
        this.noticeContent = response.data;
        this.noticePreviewShow = true;
      });
    },
    listAllRegisterDept() {
      listAllRegisterDept().then((response) => {
        this.registerDeptList = response.data;
      });
    },
    listAllRegisterType() {
      listAllRegisterType().then((response) => {
        this.registerTypeList = response.data;
      });
    },
    getList() {
      this.loading = true;
      indexListRegisterInfo(this.queryParams).then((response) => {
        console.log("查询到的数据总数:", response.total);
        console.log("查询到的数据:", response.rows);

        // 处理数据
        this.dataList = response.rows.map((row) => {
          console.log(
            "处理行数据:",
            row.userName,
            "auditStatus:",
            row.auditStatus,
            "graduationStatus:",
            row.graduationStatus
          );
          let registerFlowList = Array.isArray(row.registerFlowList)
            ? row.registerFlowList
            : [];

          // 检查第一个节点是否是"暂存"状态
          const isFirstNodeDraft =
            registerFlowList.length > 0 &&
            registerFlowList[0].nodeStatusDesc === "暂存" &&
            registerFlowList[0].nodeStatus === 0; // 假设0表示暂存状态
          if (isFirstNodeDraft) {
            // 如果第一个节点是暂存，则只保留第一个节点
            registerFlowList = [registerFlowList[0]];

            // 设置进度为0
            row.progress = "0%";
          } else {
            // 正常计算进度
            const completedSteps = registerFlowList.filter(
              (item) => item.finish
            ).length;
            const totalSteps = 9;
            row.progress =
              totalSteps > 0
                ? Math.floor((completedSteps / totalSteps) * 100) + "%"
                : "0%";
          }

          // 更新特定节点的状态描述
          registerFlowList.forEach((item) => {
            if (
              item.nodeName === "进修医院发放通知书" &&
              item.nodeStatus != null &&
              item.nodeStatus !== 0 &&
              item.nodeStatus !== 1
            ) {
              item.nodeStatusDesc = "查看通知书";
              item.nodeNameHtml = `进修医院<br/>发放录取通知`;
            } else if (
              item.nodeName === "进修申请状态" &&
              item.nodeStatus === 1
            ) {
              item.nodeStatusDesc = "查看报名信息";
            } else if (item.nodeName === "支付进修费用") {
              item.nodeNameHtml = `学员<br/>支付进修费用`;

              // 根据 refundStatus 和 nodeStatus 设置 nodeStatusDesc
              if (item.refundStatus != null) {
                switch (item.refundStatus) {
                  case 0:
                    item.nodeStatusDesc = "退款待审核";
                    break;
                  case 1:
                    item.nodeStatusDesc = "退款审核中";
                    break;
                  case 2:
                    item.nodeStatusDesc = "退款已审核";
                    break;
                  case 3:
                    item.nodeStatusDesc = "退款已拒绝";
                    break;
                  case 4:
                    item.nodeStatusDesc = "退款执行中";
                    break;
                  case 5:
                    item.nodeStatusDesc = "已退款";
                    break;
                  case 6:
                    item.nodeStatusDesc = "已失败";
                    break;
                  default:
                    item.nodeStatusDesc = "未知状态";
                    break;
                }
              } else {
                switch (item.nodeStatus) {
                  case 0:
                    item.nodeStatusDesc = "待支付";
                    break;
                  case 1:
                    item.nodeStatusDesc = "已支付";
                    break;
                  case 2:
                    item.nodeStatusDesc = "支付失败";
                    break;
                  case 3:
                    item.nodeStatusDesc = "已逾期";
                    break;
                  case 4:
                    item.nodeStatusDesc = "退款中";
                    break;
                  case 5:
                    item.nodeStatusDesc = "已退款";
                    break;
                  default:
                    item.nodeStatusDesc = "查看详情";
                    break;
                }
              }
            } else if (item.nodeName === "确定按时报到") {
              item.nodeNameHtml = `学员<br/>确定按时报到`;
              if (item.nodeStatus === 2) {
                item.nodeStatusDesc = "去确认";
              }
            } else if (item.nodeName === "进修医院资质审核") {
              item.nodeNameHtml = `进修医院<br/>资质审核`;
            } else if (item.nodeName === "完成岗前培训视频") {
              item.nodeNameHtml = item.canClick
                ? `岗前培训视频<br/><span style="color: #138eff">${item.nodeStatusDesc}</span>`
                : `岗前培训视频`;
            } else if (item.nodeName === "签署进修生告知书") {
              item.nodeNameHtml = `学员签署<br/>进修生告知书`;
            } else if (item.nodeName === "签署临床医务人员行风自律承诺书") {
              item.nodeNameHtml = `学员签署<br/>签署临床医务人员行风自律承诺书`;
            } else if (item.nodeName === "科主任签署行风承诺书") {
              item.nodeNameHtml = `科主任签署<br/>行风自律承诺书`;
            } else if (item.nodeName === "现场报到(扫二维码)") {
              item.nodeNameHtml = `现场报到`;
            }
          });

          return {
            ...row,
            registerFlowList,
          };
        });

        this.total = response.total;
        this.loading = false;
      });
    },
    detailOpen(row) {
      this.registerInfo.id = row.id;
      this.detailShow = true;
    },
    async editOpen(row) {
      // 验证进修期限
      const isValid = await this.validateDurationStartDate(row);
      if (!isValid) {
        return; // 如果验证失败，不允许编辑
      }

      this.$router.push({
        path: "/business/registerBase/audit/components/registerInfoUpdate",
        query: { id: row.id },
      });
    },
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除报名信息编号为"' + ids + '"的数据项？')
        .then(function () {
          return delRegisterInfo(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch((error) => {
          console.error("删除失败:", error);
          this.$modal.msgError("删除失败，请稍后重试");
        });
    },
    revokeOpen(row) {
      let params = {
        id: row.id,
        auditStatus: 0,
      };
      this.$modal.confirm("您确定撤销申请吗？").then(() => {
        updateRegisterInfo(params).then(() => {
          this.getList();
          this.$modal.msgSuccess("撤销成功");
        });
      });
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 0 20px 20px 20px;
}

::v-deep .el-dialog__body {
  max-height: 60vh;
  overflow-y: auto;
}

.codeimg {
  width: 100px;
  margin: 10px 0;
}

.custom-table {
  .custom-dept {
    display: flex;
    /**
       * 样式定义了一个容器，用于排列子元素并设置边框和内边距。
       * - 子元素在主轴上均匀分布（两端对齐）。
       * - 子元素在交叉轴上居中对齐。
       * - 边框为1像素实线，颜色为#d8d8d8。
       * - 内边距为左右各20像素。
       * - 容器高度为90像素。
       */
    justify-content: space-between;
    align-items: center;
    border: 1px solid #d8d8d8;
    padding: 0 20px;
    height: 90px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;

    .desc {
      font-size: 12px;
      color: #999;
      margin-top: 10px;
      font-weight: normal;
    }
  }

  .custom-dept:hover {
    border: 1px solid red;
  }

  .custom-register {
    display: flex;
    flex-direction: column;
    /* 改为垂直布局 */
    border: 1px solid rgb(232, 232, 232);
    font-size: 14px;
    margin-bottom: 10px;

    .info-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 150px;
    }

    .info {
      display: flex;
      justify-content: space-between;
      color: #606266;
      font-size: 14px;
      margin-top: 10px;

      .flexInfo {
        display: flex;
        flex-direction: column;
        margin-top: 10px;
        font-size: 14px;
        width: 450px;
        line-height: 20px;
        flex: 1;
      }
    }

    .col {
      .desc {
        color: #666666;
        margin-top: 10px;
        font-weight: normal;
      }
    }

    .col:nth-child(1) {
      width: calc(100% - 220px);
      text-align: left;
    }

    .col:nth-child(2) {
      width: 160px;
    }

    .col:nth-child(3) {
      width: 160px;
    }

    .col:nth-child(4) {
      width: 140px;
    }

    .col:nth-child(5) {
      width: 140px;
    }
  }

  /* 新增：流程图行的样式 */
  .process-flow-row {
    width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
  }
}

.enter-container {
  font-family: "Microsoft YaHei";
  font-size: 18px;
  padding: 0 15px;
  line-height: 30px;

  ::v-deep .ql-align-center {
    text-align: center;
  }
}

.tips {
  margin-top: 30px;
  text-align: center;
  margin-bottom: 30px;
}
.pay-info-container {
  .section {
    margin-bottom: 20px;
    .section-title {
      font-weight: bold;
      font-size: 16px;
      margin-bottom: 10px;
      padding-left: 10px;
      border-left: 4px solid #a52529;
      line-height: 1;
    }
    .info-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      background-color: #f9f9f9;
      padding: 15px;
      .info-item {
        .label {
          color: #666;
        }
      }
    }
    .fee-grid {
      padding: 15px;
      .fee-item {
        margin-bottom: 10px;
      }
      .total-fee {
        font-weight: bold;
        margin-top: 15px;
      }
    }
  }
}
.payment-status-section {
  text-align: center;
  padding: 10px 0 20px;
}
.payment-status-stamp-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  height: 60px;
}
.payment-status-stamp {
  border: 2px dashed;
  padding: 5px 15px;
  border-radius: 5px;
  font-size: 24px;
  font-weight: bold;
  display: inline-block;
  line-height: 1.5;

  &.paid {
    color: #67c23a;
    border-color: #67c23a;
  }
  &.failed {
    color: #f56c6c;
    border-color: #f56c6c;
  }
  &.closed,
  &.refunding,
  &.refunded {
    color: #909399;
    border-color: #909399;
  }
  &.unknown {
    color: #e6a23c;
    border-color: #e6a23c;
  }
}

/* 支付状态弹框样式 */
::v-deep .payment-status-dialog {
  .el-message-box {
    border-radius: 8px;
  }

  .el-message-box__header {
    text-align: center;
    padding: 20px 20px 10px;

    .el-message-box__title {
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }
  }

  .el-message-box__content {
    padding: 10px 20px 20px;
    text-align: center;

    .el-message-box__message {
      font-size: 14px;
      color: #666;
      line-height: 1.5;
    }
  }

  .el-message-box__btns {
    padding: 10px 20px 20px;
    text-align: center;

    .el-button {
      margin: 0 10px;
      padding: 8px 20px;
      border-radius: 4px;

      &.el-button--default {
        background-color: #aeb0b2;
        border-color: #aeb0b2;
        color: #ffffff;

        &:hover {
          background-color: #9a9c9e;
          border-color: #9a9c9e;
        }
      }

      &.el-button--primary {
        background-color: #a52529;
        border-color: #a52529;
        color: #ffffff;

        &:hover {
          background-color: #8e1f22;
          border-color: #8e1f22;
        }
      }
    }
  }
}
</style>
